<template>
    <view class="main">
        <image class="vividImage" :src="data.image" mode="widthFix" />
        <view class="card">
            <image :src="data.image" mode="scaleToFill" />
            <view class="right">
                <text>用此照片制作</text>
                <text class="right-btn" @click="handleProfile">更换照片</text>
            </view>
        </view>
        <view class="play-btn">支付4.9元,生成形象照</view>
        <!-- <view class="bottom">
            <view :style="{ backgroundColor: '#FB9638' }">相册选择</view>
            <view :style="{ backgroundColor: '#378BFB' }">相机拍摄</view>
        </view> -->
        <uni-popup ref="popup" type="center">
            <view class="popup">
                <view :style="{ backgroundColor: '#FB9638', marginBottom: '24rpx' }">相册选择</view>
                <view :style="{ backgroundColor: '#378BFB' }">相机拍摄</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            data: ""
        }
    },
    onLoad(options) {
        console.log(options),
            this.init(options.id)
    },
    methods: {
        async init(id) {
            const collection = uniCloud.database().collection("vividList")
            const {
                result
            } = await collection.where({
                _id: id
            }).get()
            this.data = result.data[0]

            uni.setNavigationBarTitle({
                title: this.data.title
            })
        },
        handleProfile() {
            this.$refs.popup.open()
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    background-color: #f3f4f6;

    .vividImage {
        // width: 100%;
        border-radius: 24rpx;
        border: 2rpx solid #fff;
        margin: 0 24rpx;
        box-sizing: border-box;
    }
}

.card {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;

    image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }

    .right {
        font-size: 32rpx;
        margin-left: 24rpx;
        color: #5D5D5D;
        display: flex;
        align-items: center;
        // width: 100%;
        flex: 1;

        .right-btn {
            color: #378BFB;
            margin-left: auto;
            border: 2rpx solid #378BFB;
            padding: 12rpx 24rpx;
            border-radius: 99rpx;
            font-size: 24rpx;
        }
    }
}

.play-btn {
    position: fixed;
    bottom: 40rpx;
    background-color: #FB9638;
    color: #fff;
    padding: 24rpx 48rpx;
    border-radius: 999rpx;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}


.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 24rpx;
    width: 100%;
    padding: 12rpx 24rpx;
    box-sizing: border-box;
    background-color: #fff;

    view {
        flex: 1;
        color: #fff;
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        border-radius: 12rpx;
    }

    .btn-download {
        color: #378bfb;
        border: 2rpx solid #378bfb;
    }

    .btn-printing {
        background-color: #378bfb;
        color: #fff;
    }
}

.popup {
    width: 500rpx;
    padding: 32rpx;
    border-radius: 12rpx;
    background-color: #fff;

    view {
        color: #fff;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        border-radius: 12rpx;
    }
}
</style>
